<script lang="ts" setup>
import {inject, reactive, ref} from "vue";
import {ElMessage, ElNotification} from "element-plus";
import {login} from "/src/api/auth"
import type {FormInstance, FormRules} from "element-plus";
import GetCodeImg from "/src/components/captcha/GetCodeImg.vue"


const loginRef = ref<FormInstance>();
const updateDialog = 'update:dialog';
const emits = defineEmits([updateDialog]);
const refreshPage = inject("reload");
// 全局状态
import {useUserStore} from "/src/store/modules/user";
const store = useUserStore();
const env = import.meta.env;
const dev_username = env.VITE_LOGIN_ADMIN || "";
const dev_password = env.VITE_LOGIN_PASSWORD || "";

interface loginFormData {
  username:string,
  password:string,
  code:string
}
const  loginForm = ref<loginFormData>({
  username: dev_username,
  password: dev_password,
  code:'',
});
const loginRules = reactive<FormRules<loginFormData>>({
  username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 4, max: 16, message: '用户名的长度只能在4到16', trigger: 'blur' },
      { pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名只能是字母，数字，下划线，减号',trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 24, message: '密码长度需在6到24位之间', trigger: 'blur' },
    {
      pattern: /^(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z]+[0-9]+|[0-9]+[a-zA-Z])[a-zA-Z0-9]*$/,
      message: '密码必须包含字母和数字，且长度在6到24位之间',
      trigger: 'change'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ]
})

const state = reactive({
  login:{
    uuid:""
  },
  dialog:{
    dialogValue:"",
    dialogVisible:false,
  }

})

const method={
  handleLogin(){
    // 处理用户名登录
    loginRef.value.validate((valid:boolean)=>{
      if (valid) {
        let {password,username,code} = loginForm.value;
        let  uuid = state.login.uuid
        login(username,password,code,uuid).then(res=>{
          if (res.code === 200){
            method.login_success(res)
          }else {
            const mag = res.msg;
            // ElMessage.error(mag);
          }
        })
      }
    })
  },
  goTo(dialogValue,dialogVisible){
    state.dialog.dialogValue = dialogValue;
    state.dialog.dialogVisible = dialogVisible;
    return state.dialog;
  },
  login_success(res){
    emits(updateDialog,method.goTo('login',false))
    ElNotification( {title:"Success", message: '登录成功',type: 'success' })
    store.loginSuccess(res)
    refreshPage()
  },
  uuidValue(value: string){
    state.login.uuid = value;
  }
}
</script>

<template>
    <div   class="container-fluid"  style="max-width: 800px" >
    <div   class="col-12 h-100" style="width: auto" >
      <div  class="login_form" >
        <div class="login_title" style="padding-bottom: 10px;display: flex;justify-content: space-between;"  >
          <span> 密码登录 </span>
          <span @click="emits(updateDialog, method.goTo('register',true))" > 还没有账号？去注册 </span>
        </div>

        <el-form size="large"  :model="loginForm" :rules="loginRules" ref="loginRef"   >
          <el-form-item prop="username"  >
            <el-input  placeholder="请输入账号" v-model="loginForm.username" >
            </el-input>
          </el-form-item>

          <el-form-item prop="password" >
            <div class="col-12" style="display: inline-flex; align-items: center;justify-content: center;" >
              <el-input placeholder="请输入密码" show-password type="password" v-model="loginForm.password"   ></el-input>
            </div>
          </el-form-item>

          <el-form-item prop="code" >
            <div class="col-12" style="display: inline-flex; align-items: center;justify-content: center;" >
              <el-input placeholder="请输入验证码" style="max-width: 70%" v-model="loginForm.code"  ></el-input>
              <div  style="margin-left: 8px">
                <GetCodeImg @update:uuid="method.uuidValue" ></GetCodeImg>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
<!--      -->
      <div  class="login_button"  style="text-align: center">
        <el-button  type="primary"  style="width: 100%; font-size: 12px; " @click="method.handleLogin">登录</el-button>
      </div>
<!--      -->
      <div  class="login_other"  style="display: flex ;justify-content: space-between; padding: 10px 10px 10px
      10px" >
        <span  style="display: flex" >其他登录：  <span> <img src="../../assets/icon/QQ.png" alt="" style="height: 20px;width: 20px ; " ></span></span>
        <span  @click="emits(updateDialog,method.goTo('forget',true))" > 忘记密码 </span>
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>
